<!--已存在的和本次上传的附件 统一渲染-->
<script setup>
import {toRefs} from "vue";
import {useStore} from "vuex";
import {CirclePlusFilled, DeleteFilled, DocumentCopy, Files, Microphone, VideoCamera} from "@element-plus/icons-vue";
import {ElMessageBox} from "element-plus";
import {DelAttachParam} from "@ginstone/nga-api/dist/src/params/NukeParams";
import {NukeApi} from "@ginstone/nga-api/dist/src/method/NukeApi";
import {ElementUtils} from "@/assets/js/ElementUtils";
import {setupMapGetters} from "@/assets/js/vuexUtils";

const props = defineProps({
  //在附件列表的位置
  index: {type: Number, required: true},
  data: {type: Object, required: true},
  tid: {type: Number},
  pid: {type: Number},
})
const store = useStore();
const getClient = setupMapGetters("Account", ["getClient"]).getClient.value
const {data, tid, pid, index} = toRefs(props)
const emit = defineEmits(['delete', 'insert'])

const clickPlus = (d) => {
  const target = d[d.length - 1]
  emit('insert', target.code, data.value.filename)
}
const clickDelete = () => {
  ElMessageBox.confirm(`即将删除附件: ${data.value.filename}, 本操作不可逆`, "确认删除附件?", {type: 'warning',}).then(() => {
    if (data.value.aid) {
      //   删除的是已有附件
      const param = new DelAttachParam(tid.value, pid.value, data.value.aid);
      NukeApi.attachDel(getClient(), param).then(res => {
        ElementUtils.notice({message: res})
        emit('delete', index.value)
      })
    } else {
      // 删除的是上传了但未提交的附件
      emit('delete', index.value)
    }
  }).catch(r => {
    console.warn(r)
  })
}

/**
 * 生成反审核文字url
 * @param url 相对路径
 */
const getTextUrl = (url) => {
  url = 'img.nga.178.com' + url;
  return url;
}

</script>

<template>
  <div class="attach-block">
    <!--    预览区-->
    <div>
      <el-tooltip :auto-close="2000" placement="top">
        <template #content>
          <div>{{ data.filename }}</div>
          <div>{{ data.description }}</div>
        </template>
        <el-icon v-if="data.extension==='mp3'" class="clickable" size="100px">
          <Microphone/>
        </el-icon>
        <el-icon v-else-if="data.extension==='mp4'" class="clickable" size="100px">
          <el-icon>
            <VideoCamera/>
          </el-icon>
        </el-icon>
        <el-icon v-else-if="data.extension==='zip'" class="clickable" size="100px">
          <el-icon>
            <Files/>
          </el-icon>
        </el-icon>
        <el-image
            v-else
            :preview-src-list="[data.url]"
            :src="data.src"
            fit="cover"
            hide-on-click-modal
            style="width: 100px; height: 100px;margin-right: 5px"
        />
      </el-tooltip>
    </div>
    <!--    操作区-->
    <div class="attach-operation">
      <el-link :download="data.filename" :href="data.url" target="_blank" type="primary">{{ data.size }}KB</el-link>

      <el-tooltip :disabled="['mp3','mp4','zip'].includes(data.extension)">
        <template #content>
          <div v-for="{label,code} in data.bbsCodes" class="clickable" @click="$emit('insert',code,data.filename)">
            <el-link type="success">{{ label }}</el-link>
          </div>
          <div class="clickable" @click="$emit('insert',getTextUrl(data.url),data.filename)">
            <el-link type="success">文字地址</el-link>
          </div>
        </template>
        <el-icon v-if="tid && pid!==undefined" class="clickable" color="green">
          <CirclePlusFilled @click="clickPlus(data.bbsCodes)"/>
        </el-icon>
        <el-icon v-else class="clickable" color="green">
          <DocumentCopy @click="clickPlus(data.bbsCodes)"/>
        </el-icon>
      </el-tooltip>
      <el-icon v-if="tid && pid!==undefined" class="clickable" color="red" @click="clickDelete">
        <DeleteFilled/>
      </el-icon>
    </div>
  </div>
</template>

<style scoped>
.attach-block {
  display: inline-block;
  text-align: center;
}

.attach-operation {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
</style>